<template>
  <div>
    <v-btn id="clickMe" color="success">固定</v-btn>
    <h1>{{normal$}}</h1>
    <hr>
    <div id="results">
      {{throttleVal}}
    </div>
    <h1>{{throttleVal.length}}</h1>


  </div>
</template>

<script>
  import * as Rx from 'rxjs'
  import * as ops from 'rxjs/operators'
  export default {
    name: "throttle",
    data(){
      return {throttleVal:0}
    },
    subscriptions(){
      return {
        normal$:Rx.interval(1000)
      }
    },
    mounted(){
      let btn = document.getElementById('clickMe');
      let clicks = Rx.fromEvent(btn, 'click');
      var open = Rx.interval(1000)
      clicks.pipe(
        ops.map(()=>0), //屏蔽事件,转换为数字 或者 mapTo(0)
        ops.scan((acc, _) => acc + 1, 0), ///实际上是累加
        //ops.buffer(open),
        //ops.filter(s => s.length>0),
        ops.buffer(open), //功能接近于 throttle 但是没有丢弃数据
        //ops.throttle(ev=> Rx.interval(1000))
      ).subscribe(s=> this.throttleVal = s)
      //setInterval(()=> btn.click(),10)
    }
  }
</script>

<style scoped>

</style>
